import React, { Component } from 'react'
import PDF from 'react-pdf-js'
import './pdfFile.less'

class pdfFile extends Component {
  constructor (props) {
    super(props)
    window.document.title = '玖里产品简介'
  }
  state = { page: 1 }

  onDocumentComplete = (pages) => {
    this.setState({ page: 1, pages })
  }

  handlePrevious = () => {
    this.setState({ page: this.state.page - 1 })
  }

  handleNext = () => {
    this.setState({ page: this.state.page + 1 })
  }

  renderPagination = (page, pages) => {
    let previousButton = (
      <li className='previous'>
        <button onClick={this.handlePrevious} className='btn btn-link'>
          上一页
        </button>
      </li>
    )
    if (page === 1) {
      previousButton = (
        <li className='previous disabled'>
          <button className='btn btn-link'>
            上一页
          </button>
        </li>
      )
    }
    let nextButton = (
      <li className='next'>
        <button onClick={this.handleNext} className='btn btn-link'>
          下一页
        </button>
      </li>
    )
    if (page === pages) {
      nextButton = (
        <li className='next disabled'>
          <button className='btn btn-link'>
            下一页
          </button>
        </li>
      )
    }
    return (
      <nav>
        <ul className='pager'>
          {previousButton}
          {nextButton}
        </ul>
      </nav>
    )
  }

  render () {
    let pagination = null
    if (this.state.pages) {
      pagination = this.renderPagination(this.state.page, this.state.pages)
    }
    return (
      <div id='pdf-box'>
        <PDF file='https://wzweb.shundaonetwork.com/玖里产品简介.pdf' onDocumentComplete={this.onDocumentComplete} page={this.state.page} />
        {pagination}
      </div>
    )
  }
}

export default pdfFile
